<script lang="ts" setup>
// import { NotificationsCircle } from "@vicons/ionicons5";
import BaseWindow from "@/components/base-window/index.vue";
import u200 from "@/assets/svg/u200.svg";
import u212 from "@/assets/svg/u212.svg";
import u224 from "@/assets/svg/u224.svg";
import u206 from "@/assets/svg/u206.svg";
import u218 from "@/assets/svg/u218.svg";
const data = [
  {
    icon: u200,
    name: "CO2",
    value: 33,
    min: 0,
    max: 45,
    unit: "度",
  },
  {
    icon: u212,
    name: "O2",
    value: 33,
    min: 0,
    max: 45,
    unit: "℃",
  },
  {
    icon: u224,
    name: "PH3",
    value: 25,
    min: 0,
    max: 45,
    unit: "kPa",
  },
  {
    icon: u206,
    name: "XXX",
    value: 33,
    min: 0,
    max: 200,
    unit: "kw",
  },
  {
    icon: u218,
    name: "CCC",
    value: 33,
    min: 0,
    max: 500,
    unit: "w",
  },
];
</script>
<template>
  <BaseWindow title="实时气体检测">
    <div class="wrapper">
      <div v-for="item in data" class="info-item">
        <div class="left">
          <img :src="item.icon" />
          <span>{{ item.name }}</span>
        </div>
        <div class="right">
          <n-progress
            :show-indicator="false"
            style="width: 167px"
            type="line"
            :percentage="item.value"
            :indicator-placement="'outside'"
            processing
          />
          <div class="value">{{ item.value }}{{ item.unit }}</div>
        </div>
      </div>
    </div>
  </BaseWindow>
</template>
<style lang="scss" scoped>
.wrapper {
  padding: 15px 30px;
  box-sizing: border-box;
  width: 500px;
  box-sizing: border-box;
  position: relative;
  .info-item {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    .left {
      display: flex;
      align-items: center;
      span {
        margin-left: 12px;
      }
    }
    .right {
      width: 250px;
      display: flex;
      align-items: center;
      margin-left: 12px;
    }
    .name {
      color: #23fffc;
      font-size: 28px;
      font-weight: 700;
    }
    .value {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.5);
      margin-left: 12px;
    }
  }
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
<style></style>
